<script setup lang='ts'>
import Swiper from '../Swiper/index.vue'
import request from '../../utils/axios'
import { onMounted, ref } from 'vue';
import VideoCard from '../video-card/index.vue'
import { useRecommendStore } from '../../store/index'
import { transform } from '@vue/compiler-core';

const store = useRecommendStore()

type RecommendCard = {
    img: string,
    title: string,
    tag: {
        text: string,
        type: number
    },
    state: number,
    playsNum: number,
    barrage: number,
    time: string,
    date: string,
    author: string
}
const mainRecommendList = ref<RecommendCard[]>()
const liveRecommendList = ref<RecommendCard[]>()
const getData = async () => {
    await store.getData()
    mainRecommendList.value = store.getMain
}
const numfilter = (num: number) => {
    if (num < 10000) return num
    else if (num > 10000 && num < 100000000) {
        return (parseFloat(num.toString()) / 10000).toFixed(1) + '万'
    } else {
        return (parseFloat(num.toString()) / 100000000).toFixed(1) + '亿'
    }
}

onMounted(() => {
    getData()
})
const isLoading = ref(false)
const ratateNum = ref(0)
const refresh = async () => {
    ratateNum.value++
    if (isLoading.value) return
    isLoading.value = true
    await store.refreshMain()
    mainRecommendList.value = store.getMain
    isLoading.value = false
}

</script>
<template>
    <main class="main-container">
        <div class="main-box">
            <div class="swiper-box">
                <div class="swiper-core">
                    <div class="swiper-shim">
                        <div class="video-card">
                            <div class="video-card-img"></div>
                            <div class="video-card-text"></div>
                        </div>
                        <div class="video-card">
                            <div class="video-card-img"></div>
                            <div class="video-card-text"></div>
                        </div>
                        <div class="shim-card">
                        </div>
                        <div class="shim-card">
                        </div>
                    </div>
                    <div class="swiper-body">
                        <swiper></swiper>
                    </div>
                </div>
            </div>
            <!-- <div class="video-card" v-for="(item, index) in mainRecommendList" :key="index">
                <div class="video-card-img">
                    <div class="img-wrap">
                        <picture class="cover">
                            <img :src="item.img" alt="">
                        </picture>
                    </div>
                    <div class="mask">
                        <div class="stats-box">
                            <div class="left-box">
                                <div class="plays-num">
                                    <span>{{ numfilter(item.playsNum) }}</span>
                                </div>
                                <div class="barrage">
                                    <span>{{ numfilter(item.barrage) }}</span>
                                </div>
                            </div>
                            <div class="right-box">
                                <div class="time">{{ item.time }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="video-card-text">
                    <div class="title">{{ item.title }}</div>
                    <div class="from">
                        <div class="tag" v-if="item.tag.type > 0">{{ item.tag.text }}</div>
                        <div class="author">{{ item.author }}</div>
                        <span style="padding:0 2px">·</span>
                        <div class="date">{{ item.date }}</div>
                    </div>
                </div>
            </div> -->
            <video-card v-for="(item, index) in mainRecommendList" :key="index" :video-info="item"></video-card>
            <div class="refresh-btn" @click="refresh">
                <svg class="icon" aria-hidden="true" :style="`transform:rotate(${ratateNum * 360}deg);`">
                    <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="text">换一换</div>
            </div>
        </div>
    </main>
</template>
<style lang='less' scoped>
.main-box {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    padding-bottom: 40px !important;
    box-sizing: border-box;
    // border-bottom: 4px solid var(--line_light);
    // overflow: hidden;
    // grid-auto-rows: 0;
    // grid-auto-columns: 0;

    // .video-card {
    //     .video-card-img {
    //         position: relative;
    //         padding-top: 56.25%;
    //         background-color: green;
    //         overflow: hidden;

    //         .img-wrap {
    //             position: absolute;
    //             z-index: 1;
    //             top: 0;
    //             left: 0;
    //             width: 100%;
    //             height: 100%;

    //             .cover {
    //                 width: 100%;
    //                 height: 100%;

    //                 img {
    //                     width: 100%;
    //                     height: 100%;
    //                 }
    //             }
    //         }

    //         .mask {
    //             position: absolute;
    //             z-index: 2;
    //             width: 100%;
    //             height: 100%;
    //             top: 0;
    //             left: 0;
    //             background-color: #000;
    //             -webkit-mask-image: linear-gradient(0, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 25%);

    //             .stats-box {
    //                 position: absolute;
    //                 z-index: 3;
    //                 bottom: 0;
    //                 display: flex;
    //                 width: 100%;
    //                 padding: 16px 8px 9px;
    //                 box-sizing: border-box;
    //                 justify-content: space-between;
    //                 color: #fff;
    //                 font-size: 14px;

    //                 .left-box {
    //                     display: flex;
    //                     align-items: center;

    //                     .plays-num {
    //                         margin-right: 10px;
    //                     }
    //                 }

    //                 .right-box {}
    //             }

    //         }
    //     }

    //     .video-card-text {
    //         display: flex;
    //         flex-direction: column;
    //         justify-content: space-between;
    //         margin-top: 10px;
    //         height: 64px;
    //         background-color: yellow;

    //         .title {
    //             display: -webkit-box;
    //             font-size: 15px;
    //             overflow: hidden;
    //             word-wrap: break-word;
    //             text-overflow: ellipsis;
    //             -webkit-box-orient: vertical;
    //             -webkit-line-clamp: 2;
    //         }

    //         .from {
    //             display: flex;
    //             align-items: center;
    //             font-size: 13px;

    //             .tag {
    //                 margin-right: 5px;
    //                 background-color: #fff0e3;
    //                 color: #ff7f24;
    //             }

    //             .author,
    //             .date {
    //                 color: #9499a0;
    //             }
    //         }

    //     }
    // }

    .swiper-box {
        background-color: red;
        grid-column: span 2;
        grid-row: span 2;

        // grid-template-rows: repeat(2,1fr);
        .swiper-core {
            width: 100%;
            position: relative;

            .swiper-shim {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
                grid-row: span 2;
                grid-column: span 2;
                background-color: yellowgreen;
                visibility: hidden;

                .video-card {
                    .video-card-img {
                        padding-top: 56.25%;
                    }

                    .video-card-text {
                        margin-top: 10px;
                        height: 60px;
                    }
                }

                .shim-card {
                    padding-top: 56.25%;
                }
            }

            .swiper-body {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                border-radius: 6px;
                overflow: hidden;
                background-color: var(--graph_bg_regular);
            }
        }

    }

    .refresh-btn {
        position: absolute;
        left: 100%;
        top: 0;
        width: 40px;
        box-sizing: border-box;
        margin-left: 10px;
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
        padding: 9px;
        border: 1px solid var(--line_regular);
        border-radius: 8px;
        font-size: 12px;
        transition: all .3s;

        &:hover {
            background-color: var(--graph_bg_thick);
        }

        .icon {
            margin-bottom: 5px;
            transition: all .3s ease;
        }
    }
}
</style> 